<template>
	<div class="update_file">
		<div class="common_update_img_progress">
			<span :style="'width:'+progress+'%'"></span>
		</div>
		<input type="file" ref="updatefile" @change="fileChangeHandle" value="Update" />
		<span @click="closeCommonUpdateImg" class="common_update_img_close"></span>
	</div>
</template>
<script>
	class FileReaderExtend{
		constructor(file, filetype, filesize){
			this.file = file;
			this.filetype = filetype;
			this.filesize = filesize;
			this.reader = new window.FileReader();
			return this;
		}
		on(name, func){
			this.reader["on"+name] = func;
			return this;
		}
		readData(){
			const reg = new RegExp(this.filetype.replace("/","\\/"));
			if (reg.test(this.file.type) && this.file.size < this.filesize * 1024 * 1024){
				this.reader.readAsBinaryString(this.file);
			}else{
				this.reader.onerror();
			}
			return this;
		}
	}

	class AJAX{
		constructor(options, res, func){
			this.xhr = new XMLHttpRequest();
			this.result = res;
			this.xhr.open(options.type, options.url, true);
			this.xhr.timeout = options.timeout;
			this.xhr.overrideMimeType(options.mimetype);
			func(this.xhr, res);
			return this;
		}
		on(name, func){
			this.xhr["on"+name] = func;
			return this;
		}
		send(){
			this.xhr.sendAsBinary && this.xhr.sendAsBinary(this.result);
			this.xhr.send && this.xhr.send(this.result);
			return this;
		}
	}
	export default{
		name:"update_file",
		data:function(){
			return {
				startTime:0,
				endTime:0,
				endval:0,
				altime:0,
				Lnum:0,
				calcspeed:0,
				progress:0,
				ajaxProgress:0,
				error:0,
				currentType:'wait',
				isShowTip: false
			}
		},
		methods:{
			closeCommonUpdateImg:function(){
				this.$emit("closeCommonUpdateImg")
			},
			readerOnLoad(res){
				var that = this,
					ajax = new AJAX({
						type: "post",
						url: "",
						timeout: 300000,
						mimetype: "application/octet-stream"
					}, res, function(xhr, res){
						that.setDataObject({
		                	currentType: 'Update Start'
		                });
						//that.props.onFileUpdateStart(xhr, res);
					}).on("progress", function(e){
						if (e.lengthComputable) {
			                var percentComplete = e.loaded / e.total;
			                that.setDataObject({
			                	ajaxProgress: percentComplete * 100
			                });
			                //that.props.onFileUpdateProgress(percentComplete * 100, percentComplete, e);
			            }
					}).on("error", function(xhr, status, err){
						that.setDataObject({
		                	currentType: 'Error',
		                	isShowTip: false
		                });
						//that.props.onFileUpdateError(xhr, status, err);
					}).on("load", function(e){
						that.setDataObject({
		                	currentType: 'Update Success',
		                	isShowTip: false
		                });
						//that.props.onFileUpdated(e);
					}).send();
			},
			fileChangeHandle(){
				let that = this,
					file = that.$refs["updatefile"].files[0];
				that.setDataObject( {
					progress:0,
					ajaxProgress:0,
					calcspeed:0,
					error:0,
					isShowTip:true
				});
				//that.props.onFileReadStart(file.type, file.size/1024, file.name);
				let reader = new FileReaderExtend(file, file.type, file.size/1024);
				reader.on("loadstart", function(e){
					that.setDataObject( {
						startTime: new Date(),
						fileName: file.name,
						currentType: 'Reading'
					});
				}).on("load", function(e){
					that.setDataObject( {
						error: 1,
						currentType: 'Read Success'
					});
					//that.props.onFileReaded(e);
					that.readerOnLoad(e.target.result);
				}).on("progress", function(e){
					let endTime = new Date(),
						endval = e.loaded,
						altime = (e.loaded - (that.$data.endval||0)) / (endTime - that.$data.startTime),
						Lnum = Math.pow(10, 2),
						calcspeed = Math.round(altime * Lnum) / Lnum,
						progress = ((e.loaded / e.total) * 100).toFixed(0),
						progressVal = progress+"%",
						calcspeedVal = calcspeed + "K/s";
					that.setDataObject( {
						endTime: endTime,
						altime: altime,
						endval: endval,
						Lnum: Lnum,
						calcspeed: calcspeed,
						progress: progress
					});
					console.log(progressVal,calcspeedVal)
					//that.props.onFileReadProgress(progressVal, calcspeedVal, e);
				}).on("error", function(e){
					/*that.props.onFileReadError({
						type: 4
					});*/
					that.setDataObject( {
						currentType: 'Error',
						error: file.size > 200 * 1024 * 1024 ? 2 : 3,
		                isShowTip: false
					});
				}).readData();
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.update_file{

	}
</style>